<template>
  <div>
    <div class="list" @click='tofather'>
      <img :src="img" />
      <span class='name'>{{ name }}</span>
      <span class="price">单价:{{ price }}.00</span>
      <span class="number">数量:<input type="number" min='1' class='numinput' v-model="cnum" @change='changeNum'></span>
    </div>
  </div>
</template>

<script>
//1.先在子代中绑定@change事件，自定义事件名，
//2.在methods中创建方法（事件名）,通过this.$emit传递参数给父代
export default {
  name: "CartItem",
  data: function () {
    return {
      cnum: this.num,
    }; 
  },
  mounted:function(){
    window.public2 = this.public
  },
  props: {
    id: Number,
    img: String,
    name: String,
    price: String,
    num: Number,
  },
  methods:{
    changeNum:function() {
      console.log('子代修改了数据');
      this.$emit('fromChildren',this.cnum,this.id);
      //传递单个参数
      console.log(this.cnum,this.id);
      this.$emit('changeFatherNum',this.cnum,this.id);   //给父代传递this.cnum
      //传递多个参数
      //this.$emit('changeFatherNum',this.cnum,1,2,3,4,5,6);   //给父代传递this.cnum，1，2，3，4，5，6
    },
    tofather:function(){
      console.log('tofather');
      this.$emit('click');
    }
  },
  created:function() {
    // console.log('cartitem创建了');
  }
};
</script>

<style scoped>
img {
  width: 200px;
  position: relative;
}
.list {
  background-color: lightskyblue;
  border: 1px solid #f9f9fa;
  margin: 10px 0;
}
.list span {
  vertical-align: top;
  color: #3c3c3c;
  font-size: 30px;
  position: absolute;
}
.list .name {
  width:800px;
}
.list .price {
  width:300px;
  margin: 150px 0;
  font-weight: 600;
}
.list .number {
  width:70px;
  position: absolute;
  margin: 149px 300px;
  font-weight: 600;
}
.numinput {
  position: absolute;
  margin-top: 5px;
  margin-left:10px;
  width: 40px;
  height: 30px;
}

</style>